<template>
	<view>
		<z-paging ref="paging" :auto="fasle" v-model="dataList" @query="getDataListAll"
			:show-loading-more-no-more-view="false">
			<view slot="top">
				<u-navbar title="时效卡" placeholder :autoBack="true" leftIconColor="#fff" bgColor="#FFFFFF"
					:titleStyle="titleStyle">
				</u-navbar>
				<view class="exchangeV">
					<view class="exchangeLeftV">
						<text class="exchangeTv1">可兑换额度(元)</text>
						<text class="exchangeTv2">￥{{mCardData[0].money}}</text>
						<text class="exchangeTv3">{{mCardData[0].name}}</text>
					</view>
				<!-- 	<view class="exchangeLeftV">
						<text class="exchangeTv1">可兑换额度(元)</text>
						<text class="exchangeTv2">￥{{mCardData[1].money}}</text>
						<text class="exchangeTv3">{{mCardData[1].name}}</text>
					</view> -->
					<view class="exchangeTv4" @click="onExchangeClick">
						去兑换
					</view>
				</view>
				<view class="titleTv">兑换记录</view>
			</view>
			<view class="itemV" v-for="(item,index) in dataList" :key="item" @click="onReturnClick(item)">
				<image class="itemIv" :src="item.image"></image>
				<view class="itemRight">
					<text class="itemTv1">{{item.title}}</text>
					<view class="itemRightV">
						<text class="itemTv2">￥{{item.price}}</text>
						<text class="itemTv3">{{item.createtime}}</text>
					</view>
				</view>
			</view>
		</z-paging>
		<u-popup :show="isRefund" mode="bottom" customStyle="width:100%; background-color: #00000000;">
			<view class="pupRefundV">
				<view class="pupTitleV">
					<text class="pupTitleTv">退卡申请</text>
					<image @click="isRefund=false" class="pupTitleIv" src="../../static/public/colse.svg"></image>
				</view>
				<text class="pupTxt">将卡退回到余额！</text>
				<view class="pupBottomV">
					<text class="pupBottomTv1" @click="isRefund=false">取消</text>
					<text class="pupBottomTv2" @click="onSumClick">确认</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#ffffff"
				},
				mCardData: undefined,
				dataList: [],
				mCardInfo:undefined,//条目详情
				isRefund: false
			}
		},
		onShow() {
			this.getAccountList();
			if (this.$refs.paging) {
				this.$refs.paging.reload();
			}
		},
		methods: {
			getAccountList() {
				this.$api.getAccountList({

				}).then((res) => {
					this.mCardData = res;
				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "获取账户失败" : e.msg)
				})
			},
			getDataListAll(pageNo, pageSize) {
				this.$api.getCardList({
					page: pageNo,
				}).then((res) => {
					this.$refs.paging.complete(res.list);
				}).catch((e) => {
					this.$refs.paging.complete(false);
				})
			},
			onReturnClick(item) { //退回余额
				// this.$u.route({
				// 	url: '/shop/bodyBuilding/RefundBalance',
				// })
				this.mCardInfo = item;
				this.isRefund = true;
			},
			onSumClick() { //退回余额
				this.$api.getTuiCard({
					id:this.mCardInfo.id
				}).then((res) => {
					this.isRefund = false;
					uni.$u.toast("退回成功")
					this.$refs.paging.reload();
				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "退回失败" : e.msg)
				})
			},
			onExchangeClick() { //去兑换
				this.$u.route({
					url: '/shop/bodyBuilding/RedemptionCenter',
				})
			}
		}
	}
</script>

<style lang="scss">
	.exchangeV {
		height: 210rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 20rpx;
		background: linear-gradient(135.89deg, rgba(212, 255, 69, 1) 0%, rgba(69, 255, 184, 1) 100%);
		margin: 30rpx;
	}

	.exchangeLeftV {
		display: flex;
		flex-direction: column;
		padding-left: 10rpx;
	}

	.exchangeTv1 {
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(51, 55, 55, 1);
	}

	.exchangeTv2 {
		font-size: 50rpx;
		font-weight: 700;
		color: rgba(51, 55, 55, 1);
	}

	.exchangeTv3 {
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(51, 55, 55, 1);
	}

	.exchangeTv4 {
		color: #fff;
		font-size: 24rpx;
		border-radius: 106rpx 0px, 0px, 106rpx;
		background: rgba(31, 31, 31, 1);
		padding-left: 40rpx;
		padding-right: 20rpx;
		height: 55rpx;
		border-bottom-left-radius: 50rpx;
		border-top-left-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.titleTv {
		color: #fff;
		margin-top: 50rpx;
		margin-left: 45rpx;
		font-size: 32rpx;
		font-weight: 500;
		padding-bottom: 30rpx;
	}

	.itemV {
		display: flex;
		align-items: center;
		background-color: #1f1f1f;
		padding: 30rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}

	.itemIv {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
	}

	.itemRight {
		flex: 1;
		display: flex;
		height: 100rpx;
		margin-left: 20rpx;
		flex-direction: column;
		justify-content: space-between;
	}

	.itemRightV {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.itemTv1 {
		color: #e8e8e8;
		font-size: 28rpx;
		font-weight: 600;
	}

	.itemTv2 {
		color: #e8e8e8;
		font-size: 28rpx;
		font-weight: 500;
	}

	.itemTv3 {
		color: #8d8d8d;
		font-size: 24rpx;
		font-weight: 400;
	}

	.pupRefundV {
		border-radius: 20rpx 20rpx, 0rpx, 0rpx;
		background: #1F1F1F;
	}

	.pupTitleV {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 48rpx;
		position: relative;
	}

	.pupTitleTv {
		font-size: 32rpx;
		font-weight: 600;
		color: #fff;
	}

	.pupTitleIv {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 20rpx;
	}

	.pupTxt {
		margin-top: 32rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pupBottomV {
		display: flex;
		align-items: center;
		margin-top: 60rpx;
	}

	.pupBottomTv1 {
		flex: 1;
		height: 98rpx;
		color: #c2c2c2;
		font-size: 32rpx;
		font-weight: 500;
		background: #3D3F3E;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pupBottomTv2 {
		flex: 1;
		height: 98rpx;
		color: #333333;
		font-size: 32rpx;
		font-weight: 500;
		background: #CEF743;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>